<html>

<head>
    <meta charset="utf-8">
    <title>模型光效</title>
    <script src='../w3d.js' type="text/javascript"></script>
    <script src='../config.js' type="text/javascript"></script>
    <script src='../../lib/lil-gui.umd.min.js' type="text/javascript"></script>
    <script type="text/javascript">

        let engine, scene, canvas, body, geometry, sampler, samplerRoll, entity, camera,plight,aLight;
        function init() {
            canvas = document.getElementById('canvas');
            body = document.getElementById('body');
            let path = [
                `../../demo/pub/assets/skybox/twilight/pos-x.jpg`,
                `../../demo/pub/assets/skybox/twilight/neg-x.jpg`,
                `../../demo/pub/assets/skybox/twilight/pos-y.jpg`,
                `../../demo/pub/assets/skybox/twilight/neg-y.jpg`,
                `../../demo/pub/assets/skybox/twilight/pos-z.jpg`,
                `../../demo/pub/assets/skybox/twilight/neg-z.jpg`
            ]
            engine = new w.Engine({auth,
                canvas: canvas,
                contextmunu: false,//是否支持右键菜单
                background: path,
                environment: path,
                intensity: 1,
                gamma: 1.5,
                ambientColor: "#ffffff",
                ambientIntensity: 0.0
            });
            engine.init(this.initGPU);
        }
        function initGPU() {
            scene = engine.scene;
            scene.postProcessing.add(new w.effects.Fxaa());
            scene.orbit.maxPitch = Math.PI / 3;//限制操作相机的orbit组件的最大倾斜角度。
            initCamera();//初始化相机姿态
            addMesh();//添加点
            addLight();
            addAnimation('none');
        }
        function initCamera() {
            camera = engine.scene.getCamera()
            camera.near = 0.1;
            camera.far = 100000;
            camera.trans.position = [0, 0, 200];
            camera.pitch = Math.PI / 6;
        }
        function addMesh() {
            engine.res.gltfLoader.load(ip + 'demo/pub/assets/testmodel/OUT/out.gltf', { position: [0, 0, 0], rotation: [Math.PI / 2, 0, 0], scale: [1, 1, 1], indexedDB: true }, (gltf) => {
                engine.scene.addEntity(gltf);
            });
        }
        function addLight() {
            //点光源
            let point = new w.light.PointLight({
                intensity: 20,
                distance: 0
            });
            plight=new w.Object3D({position:[0,0,3]});
            plight.addComponent(point);
            scene.addEntity(plight);
            //区域光
            aLight = new w.light.AreaLight({
                position: [0, 0, 1],
                width: 25,
                height: 50,
                intensity: 14
            });
            let alightObject=new w.Object3D({position:[0,0,10]});
            alightObject.addComponent(aLight);
            scene.addEntity(alightObject);


        }
        function addAnimation(easing) {
            let animation = new w.animation.Animation({ id: "hkdl", loop: 0 });
            let samplerPoint = new w.animation.Sampler([0, 1, 2], [[0, 0, 10],[90, 60, 10],[-90, 0, 10]], "LINEAR",easing);
            samplerPoint.invert()
            let channelPoint = new w.animation.Channel(plight.trans, "position");//通道,作用对象为点光源point,作用于position位置属性
            channelPoint.add(samplerPoint);
            animation.add(channelPoint);
            //roll
            let samplerArea = new w.animation.Sampler([0, 1, 2], [50, 90,  130], "LINEAR",easing);
            samplerArea.invert()
            let channelArea = new w.animation.Channel(aLight, "height");//通道,作用对象为点光源point,作用于position位置属性
            channelArea.add(samplerArea);
            animation.add(channelArea);
            scene.addAnimation(animation);
        }

    </script>
    <style>
        html,
        body,
        #canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body onload="init()">
    <canvas id="canvas"></canvas>
</body>

</html>